﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<title>Jcrop Layout</title>
	<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="jquery.Jcrop.min.js" type="text/javascript"></script>
	<link rel="stylesheet" href="jquery.Jcrop.min.css" type="text/css" />
	<link rel="stylesheet" href="cropper.css" type="text/css" />
</head>
<body>
	<!-- cropper 1 Start -->
	<script src="cropper.js" type="text/javascript"></script>
	<div id="cropper1" class="imageCropper">
		<div class="cropOriginal">
			<img src="pool.jpg" class="target" alt="Pool" width="500" height="370" />
		</div>
		<div class="previewContainer" data-constraint="true" data-width="0" data-height="80"
			data-position="CM" style="overflow: hidden;">
			<img src="pool.jpg" alt="Preview" class="jcrop-preview" style="display: none" />
		</div>
		<div class="cropInfo">
			<br />
			&nbsp;
			<br />
			&nbsp;
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function () {
			var theCropper = new Cropper("#cropper1");
			theCropper.initCropper();
		});
	</script>
	<!-- cropper 1 END-->

	<!-- cropper 2 Start -->
	<script src="cropper.js" type="text/javascript"></script>
	<div id="cropper2" class="imageCropper">
		<div class="cropOriginal">
			<img src="sago.jpg" class="target" alt="Pool" width="500" height="370" />
		</div>
		<div class="previewContainer" data-constraint="true" data-width="100" data-height="180"
			data-position="CM" style="overflow: hidden;">
			<img src="sago.jpg" alt="Preview" class="jcrop-preview" style="display: none" />
		</div>
		<div class="cropInfo">
			<br />
			&nbsp;
			<br />
			&nbsp;
		</div>
	</div>
	<script type="text/javascript">
		$(document).ready(function () {
			var theCropper2 = new Cropper("#cropper2");
			theCropper2.initCropper();
		});
	</script>
	<!-- cropper 2 END -->
</body>
</html>
